import React, { useEffect, useRef } from 'react'
import './css/miaosha.scss'
import { NavBar, Toast } from '@nutui/nutui-react';
import { Share, ArrowLeft } from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom';
import { VolumeO } from '@react-vant/icons'
import { NoticeBar, Swiper } from 'react-vant'
import { FireFill } from 'antd-mobile-icons'
import { Sticky } from 'react-vant';

export default function Miaosha() {
    const navigate = useNavigate()
    const container = useRef(null)
    const tabBox = useRef(null)
    const tabList = document.querySelectorAll('.item')
    useEffect(() => {
        // console.log(tabBox.current.offsetWidth);
        console.log(tabList);
    }, [])
    return (
        <div className='miaosha'>
            <div className='header'>
                <NavBar
                    titleAlign="left"
                    back={
                        <>
                            <ArrowLeft />
                        </>
                    }
                    right={
                        <span className="flex-center" onClick={(e) => Toast.show('icon')}>
                            <Share />
                        </span>
                    }
                    onBackClick={(e) => { Toast.show('返回'); navigate('/home') }}
                >
                    限时秒杀
                </NavBar>
            </div>
            <div className='header2'>
                <div className='con'>
                    <p><FireFill color='red' /> 每日签到赚积分</p>
                    <button onClick={() => { navigate('/jifen') }}>去签到</button>
                </div>
            </div>
            <div className='body'>
                <div className='sha'>
                    <div className='box'>
                        <div className='box-title'>
                            <p className='title'>
                                清仓热卖
                            </p>
                            <p className='time'>
                                <span>23</span>:
                                <span>52</span>:
                                <span>01</span>
                            </p>
                        </div>
                        <div className='box-progress-wrap'>
                            <div className='progress-line'>

                            </div>
                            <div className='box-progress'>
                                <div className='progress-item'>
                                    <p className='item-title'>8折</p>
                                    <p className='item-status'>已结束</p>
                                </div>
                                <div className='progress-item'>
                                    <p className='item-title'>8折</p>
                                    <p className='item-status'>已结束</p>
                                </div>
                                <div className='progress-item'>
                                    <p className='item-title'>8折</p>
                                    <p className='item-status'>已结束</p>
                                </div>
                                <div className='progress-item'>
                                    <p className='item-title'>8折</p>
                                    <p className='item-status'>已结束</p>
                                </div>
                                <div className='progress-item'>
                                    <p className='item-title'>8折</p>
                                    <p className='item-status'>已结束</p>
                                </div>
                            </div>
                        </div>
                        <div className='box-list'>
                            <div className='list-item'>
                                <p className='item-img'>
                                    <img src='./imgs/pro1.png' width='100%'></img>
                                </p>
                                <p className='item-title'>
                                    商品1
                                </p>
                                <p className='item-progress'></p>
                                <p className='item-price'>
                                    <span className='price-title'>
                                        ￥5.93/份
                                    </span>
                                    {/* <span className='price-icon'></span> */}
                                </p>
                            </div>
                            <div className='list-item'>
                                <p className='item-img'>
                                    <img src='./imgs/pro2.png' width='100%'></img>
                                </p>
                                <p className='item-title'>
                                    商品2
                                </p>
                                <p className='item-progress'></p>
                                <p className='item-price'>
                                    <span className='price-title'>
                                        ￥12.93/份
                                    </span>
                                    {/* <span className='price-icon'></span> */}
                                </p>
                            </div>
                            <div className='list-item'>
                                <p className='item-img'>
                                    <img src='./imgs/pro3.png' width='100%'></img>
                                </p>
                                <p className='item-title'>
                                    商品3
                                </p>
                                <p className='item-progress'></p>
                                <p className='item-price'>
                                    <span className='price-title'>
                                        ￥15.93/份
                                    </span>
                                    {/* <span className='price-icon'></span> */}
                                </p>
                            </div>
                            <div className='list-item'>
                                <p className='item-img'>
                                    <img src='./imgs/pro4.png' width='100%'></img>
                                </p>
                                <p className='item-title'>
                                    商品4
                                </p>
                                <p className='item-progress'></p>
                                <p className='item-price'>
                                    <span className='price-title'>
                                        ￥9.93/份
                                    </span>
                                    {/* <span className='price-icon'></span> */}
                                </p>
                            </div>
                            <div className='list-item'>
                                <p className='item-img'>
                                    <img src='./imgs/pro5.png' width='100%'></img>
                                </p>
                                <p className='item-title'>
                                    商品5
                                </p>
                                <p className='item-progress'></p>
                                <p className='item-price'>
                                    <span className='price-title'>
                                        ￥12.93/份
                                    </span>
                                    {/* <span className='price-icon'></span> */}
                                </p>
                            </div>
                            <div className='list-item'>
                                <p className='item-img'>
                                    <img src='./imgs/pro6.png' width='100%'></img>
                                </p>
                                <p className='item-title'>
                                    商品6
                                </p>
                                <p className='item-progress'></p>
                                <p className='item-price'>
                                    <span className='price-title'>
                                        ￥6.93/份
                                    </span>
                                    {/* <span className='price-icon'></span> */}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='goods'>
                    <div className='box' ref={container}>
                        <Sticky container={container} offsetTop={100}>
                            <div className='tab'>
                                <div className='type' ref={tabBox}>
                                    <ul>
                                        <li className='item'>推荐</li>
                                        <li className='item'>蔬菜豆制品</li>
                                        <li className='item'>水果鲜花</li>
                                        <li className='item'>肉禽类</li>
                                        <li className='item'>水产海鲜</li>
                                        <li className='item'>乳品烘焙</li>
                                        <li className='item'>冻品面点</li>
                                        <li className='item'>酒水饮料 </li>
                                        <li style={{ color: 'white' }}> 1 </li>
                                    </ul>
                                </div>
                                <div className='more'>更多</div>
                            </div>
                        </Sticky>
                        <div className='box-list'>
                            <div className='list-item'>
                                <div className='item-left'>
                                    <img src='./imgs/pro1.png' alt='' width='100%'></img>
                                </div>
                                <div className='item-right'>
                                    <p className='right-title'>鹅</p>
                                    <p className='right-dis'>中华老字号</p>
                                    <p className='right-tag'>近30天低价</p>
                                    <p className='right-price'>
                                        <span className='price-left'>
                                            ￥
                                            <span className='left-big'>3</span>
                                            .9/盒子
                                        </span>
                                        <span className='price-right'>
                                            抢
                                        </span>
                                    </p>
                                </div>
                            </div>
                            <div className='list-item'>
                                <div className='item-left'>
                                    <img src='./imgs/pro2.png' alt='' width='100%'></img>
                                </div>
                                <div className='item-right'>
                                    <p className='right-title'>荔枝</p>
                                    <p className='right-dis'>中华老字号</p>
                                    <p className='right-tag'>近30天低价</p>
                                    <p className='right-price'>
                                        <span className='price-left'>
                                            ￥
                                            <span className='left-big'>9</span>
                                            .9/盒子
                                        </span>
                                        <span className='price-right'>
                                            抢
                                        </span>
                                    </p>
                                </div>
                            </div>
                            <div className='list-item'>
                                <div className='item-left'>
                                    <img src='./imgs/pro3.png' alt='' width='100%'></img>
                                </div>
                                <div className='item-right'>
                                    <p className='right-title'>肉</p>
                                    <p className='right-dis'>中华老字号</p>
                                    <p className='right-tag'>近30天低价</p>
                                    <p className='right-price'>
                                        <span className='price-left'>
                                            ￥
                                            <span className='left-big'>12</span>
                                            .9/盒子
                                        </span>
                                        <span className='price-right'>
                                            抢
                                        </span>
                                    </p>
                                </div>
                            </div>
                            <div className='list-item'>
                                <div className='item-left'>
                                    <img src='./imgs/pro4.png' alt='' width='100%'></img>
                                </div>
                                <div className='item-right'>
                                    <p className='right-title'>鱼</p>
                                    <p className='right-dis'>中华老字号</p>
                                    <p className='right-tag'>近30天低价</p>
                                    <p className='right-price'>
                                        <span className='price-left'>
                                            ￥
                                            <span className='left-big'>7</span>
                                            .9/盒子
                                        </span>
                                        <span className='price-right'>
                                            抢
                                        </span>
                                    </p>
                                </div>
                            </div>
                            <div className='list-item'>
                                <div className='item-left'>
                                    <img src='./imgs/pro5.png' alt='' width='100%'></img>
                                </div>
                                <div className='item-right'>
                                    <p className='right-title'>休闲食品</p>
                                    <p className='right-dis'>中华老字号</p>
                                    <p className='right-tag'>近30天低价</p>
                                    <p className='right-price'>
                                        <span className='price-left'>
                                            ￥
                                            <span className='left-big'>7</span>
                                            .9/盒子
                                        </span>
                                        <span className='price-right'>
                                            抢
                                        </span>
                                    </p>
                                </div>
                            </div>
                            <div className='list-item'>
                                <div className='item-left'>
                                    <img src='./imgs/pro6.png' alt='' width='100%'></img>
                                </div>
                                <div className='item-right'>
                                    <p className='right-title'>鱼</p>
                                    <p className='right-dis'>中华老字号</p>
                                    <p className='right-tag'>近30天低价</p>
                                    <p className='right-price'>
                                        <span className='price-left'>
                                            ￥
                                            <span className='left-big'>7</span>
                                            .9/盒子
                                        </span>
                                        <span className='price-right'>
                                            抢
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
